import React from 'react';
import '../styles/view/app.scss'
class App extends React.Component {
    constructor() {
        super()
        this.state = {
            main2ltop: ['热门', '语文', '英语', '数学', '物理', '化学', '生物', '历史', '地理', '政治']
        }
    }
    render() {
        const { main2ltop } = this.state
        console.log(1364 * 0.86)
        return (
            <>
                <div className='box'>
                    <header>
                        <div className='header'>
                            <div className='top'>
                                <div>
                                    <span>北京</span>
                                </div>
                                <div>
                                    <ul>
                                        <li>
                                            Hi,请注册
                                        </li>
                                        <li>
                                            免费注册
                                        </li>
                                        <li>
                                            全国名师
                                        </li>
                                        <li className='border-left'>
                                            精品微课
                                        </li>
                                        <li className='border-left'>
                                            名校大全
                                        </li>
                                        <li className='border-left'>
                                            试卷大全
                                        </li>
                                        <li className='border-left'>
                                            试题大全
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div className='main'>
                                <div className='main-top'>
                                    <div>
                                        <ul>
                                            <li style={{ background: 'rgb(255,102,0)' }}>
                                                首页
                                            </li>
                                            <li>
                                                精品课程
                                            </li>
                                            <li>
                                                名校名师
                                            </li>
                                            <li>
                                                名师入住
                                            </li>
                                            <li>
                                                产品中心
                                            </li>

                                        </ul>
                                    </div>
                                </div>
                                <div className='main-img'>

                                </div>
                            </div>
                        </div>
                    </header>
                    <main>
                        <div className='main'>
                            <span>
                                全国名师推荐
                            </span>
                            <ul>
                                {
                                    [0, 1, 2, 3].map((item, index) => {
                                        return <li key={index}>
                                            {/* 圈内 */}
                                            <div className='main-box'>
                                                {/* 上 */}
                                                <div className='main-box-top'>
                                                    <div className='main-box-top-img'></div>
                                                    <div>
                                                        <h4>欧阳呵呵</h4>
                                                        <p>筑基修士</p>
                                                        <p>欧阳家族第一咸鱼</p>
                                                    </div>
                                                </div>
                                                {/* 下 */}
                                                <div className='main-box-bot'>
                                                    <ul>
                                                        <li>
                                                            从生物圈到细菌
                                                </li>
                                                        <li>
                                                            生命活动的主要承担者-蛋白质
                                                </li>
                                                        <li>
                                                            细胞的多样性
                                                </li>
                                                        <li>
                                                            基因是有遗传效应的DNA片段的具体应用
                                                </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </li>
                                    })
                                }

                            </ul>
                        </div>
                        <div className='main2'>
                            {/* 左侧 */}
                            <div className='main2-left'>
                                <div className='main2-1'>
                                    {/* 侧头 */}
                                    <div className='main2-l-top'>
                                        <span>
                                            热门名师
                                        </span>
                                        <ul>
                                            {
                                                main2ltop.map((item, index) => {
                                                    return <li key={index}>
                                                        {item}
                                                    </li>
                                                })
                                            }
                                        </ul>
                                        <span style={{ color: '#4fbb93', textAlign: 'center' }}>
                                            更多
                                    </span>
                                    </div>
                                    {/* 测内容 */}
                                    <div className='main2-l-main'>
                                        <ul>
                                            {
                                                [0, 1, 2, 3, 4, 5].map((item, index) => {
                                                    return <li key={index}>
                                                        <div className='main2-l-box'>
                                                            {/* 上 */}
                                                            <div className='main2-l-er'>
                                                                <div className='main2-img'>
                                                                    <div></div>
                                                                </div>
                                                                <div className='main2-text'>
                                                                    <h4>中国强</h4>
                                                                    <span>
                                                                        高中历史
                                                        </span>
                                                                    <p>
                                                                        北京市宣武区外国语学校
                                                        </p>
                                                                </div>
                                                            </div>
                                                            {/* 下 */}
                                                            <div className='main2-l-bot'>
                                                                <div style={{
                                                                    borderRight: '1px solid #999'
                                                                }}>
                                                                    334节微课
                                                    </div>
                                                                <div>
                                                                    56人学习
                                                    </div>
                                                            </div>
                                                        </div>
                                                    </li>
                                                })
                                            }
                                            {/* 框 */}
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div className='main2-right'>
                                <span style={{ height: '10%', display: 'inline-block' }}>名师热度榜</span>
                                <div className='main2-r-box'>
                                    <div className='main2-r-box-top'>
                                        <h3 style={{ color: 'red' }} className='main2-r-h3-first'>1.</h3>
                                        <span className='span'>
                                            {/* <img src="" alt="" /> */}
                                        </span>
                                        <div>
                                            <h4>宁羽绒</h4>
                                            <p>高中语文</p>
                                            <p>1.2w节课</p>
                                        </div>
                                    </div>
                                    <div className='main2-r-box-main'>
                                        <h3 style={{ color: 'orange' }}>2.</h3>
                                        <h4>司徒如遇</h4>
                                        <p>高中数学</p>
                                        <p>8750节课</p>
                                    </div>
                                    <div className='main2-r-box-main'>
                                        <h3 style={{ color: 'yellow' }}>3.</h3>
                                        <h4>司徒如遇</h4>
                                        <p>高中数学</p>
                                        <p>8750节课</p>
                                    </div>
                                    <div className='main2-r-box-main'>
                                        <h3 style={{ color: '#999' }}>4.</h3>
                                        <h4>司徒如遇</h4>
                                        <p>高中数学</p>
                                        <p>8750节课</p>
                                    </div>
                                    <div className='main2-r-box-main'>
                                        <h3 style={{ color: '#999' }}>5.</h3>
                                        <h4>司徒如遇</h4>
                                        <p>高中数学</p>
                                        <p>8750节课</p>
                                    </div>
                                </div>

                            </div>
                        </div>
                        <div className='main3'>
                            <div className='main-left'>
                                <span className='main3-top'>
                                    微课精选
                                </span>
                                <div className='main3-l-box'>
                                    <ul>
                                        {
                                            main2ltop.map((item) => {
                                                return <li key={item}>
                                                    {item}
                                                </li>
                                            })
                                        }
                                    </ul>
                                    <div className>
                                        <span>立体几何</span>
                                        <span>美术功底</span>
                                        <span>两元一次方式</span>
                                        <span>jsx的基础用法</span>
                                        <span>村头母猪夜半嚎叫</span>
                                        <span>李寡妇粪坑惊现双眼</span>
                                        <span>一爽1.6亿</span>
                                        <span>人性的泯没</span>
                                        <span>道德的沦丧</span>
                                        <span>三年高考五年模拟</span>
                                    </div>
                                    <div className='main3-1-box-bot'>
                                        <div style={{ background: '#6b9cba' }}>
                                            <p>
                                                高中数学必修一

                                            </p>
                                        </div>
                                        <div style={{ background: '#005243' }}>
                                            <p>
                                                高考复习

                                            </p>
                                        </div>
                                        <div style={{ background: '#97be52' }}>
                                            <p>
                                                初三数学

                                            </p>
                                        </div>
                                        <div style={{ background: '#b78cff' }}>
                                            <p>
                                                高中数学必修三

                                            </p>
                                        </div>
                                    </div>
                                </div>

                            </div>
                            <div className='main-right'>
                                <span className='main3-top'>
                                    学霸必备
                                </span>
                                <div className='mainbox-r-main'>
                                    <div>
                                        <p style={{ color: 'red', fontSize: '25px' }}>1</p>
                                        <p>高中课程</p>
                                        <p style={{
                                            float: 'right', color: '#999'
                                        }}>1.2w课节</p>
                                    </div>
                                    <div>
                                        <p style={{ color: '#ff6b00', fontSize: '25px' }}>2</p>
                                        <p>高中课程</p>
                                        <p style={{
                                            float: 'right', color: '#999'
                                        }}>1.2w课节</p>
                                    </div>
                                    <div>
                                        <p style={{ color: '#ffa800', fontSize: '25px' }}>3</p>
                                        <p>高中课程</p>
                                        <p style={{
                                            float: 'right', color: '#999'
                                        }}>1.2w课节</p>
                                    </div>
                                    <div>
                                        <p style={{ color: 'red', fontSize: '25px' }}>4</p>
                                        <p>高中课程</p>
                                        <p style={{
                                            float: 'right', color: '#999'
                                        }}>1.2w课节</p>
                                    </div>
                                    <div>
                                        <p style={{ color: 'red', fontSize: '25px' }}>5</p>
                                        <p>高中课程</p>
                                        <p style={{
                                            float: 'right', color: '#999'
                                        }}>1.2w课节</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div className='main4'>
                            <div className='main-left main4-left'>
                                <div className='main4-l-l'>
                                    <div className='main-top-text'>
                                        <strong>
                                            真题解析
                                    </strong>
                                    </div>
                                    <div className='main4-l-l-main'>
                                        <div className='main4-l-box'>
                                            <div className='main-top-text'>
                                                <p style={{ color: '#999' }}>
                                                    2015高考试题深度解析
                                        </p>
                                            </div>
                                            <div className='mian4-llm-main'>
                                                <div>

                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                                <div className='main4-l-r'>
                                    <div className='main-top-text'>
                                        <strong>
                                            更多>>
                                    </strong>
                                    </div>
                                    <div className='main-lr-main'>
                                        <div className='main4-l-box'>
                                            <div className='main-top-text'>
                                                <p style={{ color: '#999' }}>
                                                    2015高考试题深度解析
                                                </p>
                                            </div>
                                            <div className='main4-lrm-main'>
                                                <div>
                                                    <ul>
                                                        {
                                                            [0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((item) => {
                                                                return <li key={item}></li>
                                                            })
                                                        }

                                                    </ul>
                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div className='main-right main4-right'>
                                <div className='main-top-text'>
                                    <h2>
                                        名校找名师
                                    </h2>
                                    <span>
                                        更多>>
                                    </span>
                                </div>
                                <div className='main4-r-main'>
                                    <ul>
                                        {
                                            [0,1,2,3,4].map((item)=>{
                                                return <li key={item}>
                                            <div className='main4-r-img'></div>
                                            <span>中国人民大学附属中学</span>
                                        </li>
                                            })
                                        }
                                        
                                    </ul>
                                </div>
                            </div>
                            <div className='clear'></div>
                        </div>
                    </main>
                    <footer>

                    </footer>
                </div>
            </>
        )
    }
}
export default App